<template>
    <div>
        <nav-header :tasks="tasks" @addTask="addTask"/>
        <nav-main :tasks="tasks" @delTask="delTask" @updateTask="updateTask"/>
        <nav-footer :tasks="tasks" @clearCompleted="clearCompleted"></nav-footer>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import NavHeader  from "@/components/NavHeader.vue";
import NavMain  from "@/components/NavMain.vue";
import NavFooter  from "@/components/NavFooter.vue";
import { updateTaskStore } from "../store";
export default defineComponent({
    name: "home",
    props: {

    },
    components: {
       NavHeader,
       NavMain,
       NavFooter 
    },
    setup(props,context) {
        let store= updateTaskStore();
        let tasks = store.tasks;

        let addTask = (val) => {
            store.addTask({name: val,isComplete: false});
        }

        let delTask = (index) => {
            store.delTask(index);
        };

        let updateTask = (data) =>{
            store.updateTask(data.index,data.status);
        }

        let clearCompleted = () => {
             store.clearCompletedTask();
        }

        return {
            tasks,
            addTask,
            delTask,
            updateTask,
            clearCompleted
        }
    }
    
})
</script>

<style scoped lang="scss">

</style>